<!-- qna_app/templates/question_detail.html -->
{% extends 'base/base.html' %}
{% load static %}
{% load custom_filters %}
{% load my_filter %}

{% block title %}{{ question.title }} - 问答社区{% endblock %}



{% block js %}
    <script>

    $(document).ready(function() {
        $(".collect").click(function() {
            $.ajax({
                url: "/operate/collect/",
                method: "POST",

                data:{
                    "csrfmiddlewaretoken":$("input[name='csrfmiddlewaretoken']").val(),
                    "user":"{{ request.user.id }}",
                    "question":"{{ question.id }}",

                },
                success: function(res){
                    console.log("响应内容：", res);
                    if (res.msg === "收藏成功"){
                        $(".collect").attr("src", "/static/img/collect.png")
                        alert("收藏成功")
                    }

                    else if(res.msg === "取消收藏成功"){
                        $(".collect").attr("src", "/static/img/collect2.png")
                        alert("取消收藏成功")
                    }},

                error: function(err){
                    console.log(err);
                }


            })

        })

        $(".un-collect").click(function() {
            alert("请登录后再收藏！！！")
        })

    })





    </script>

{% endblock %}


{% block content %}
<div class="row">
    <div class="col-md-8 col-md-offset-2">
        <!-- 问题详情卡片 -->
        <div class="page-header">
            <h1>{{ question.title }}</h1>
            <div class="text-muted">
                <span class="tag">{{ question.topic.name }}</span>
            </div>
        </div>

        <div class="panel panel-default">
            <div class="panel-body">
                <!-- 问题作者信息 -->
                <div class="media" style="margin-bottom: 20px;">
                    {% if question.author.head %}
                    <img src="{{ question.author.head.url }}" class="avatar" alt="用户头像">
                    {% else %}
                    {% load static %}
                    <img src="{% static 'img/default_avatar.png' %}" class="avatar" alt="默认头像">
                    {% endif %}


                    {% if user.is_authenticated %}
                    <!-- 收藏系统 -->
                        {% if request.user.id|has_collected:question.id %}
                            <img  class="collect"  style="float: right" src="/static/img/collect.png" alt="加载中">

                        {% else %}
                            <img   class="collect"  style="float: right"  src="/static/img/collect2.png" alt="">
                        {% endif %}
                    {% else %}
                        <img   class="un-collect"  style="float: right"  src="/static/img/collect2.png" alt="">

                    {% endif %}



                    <div class="media-body">
                        <h4 class="media-heading">{{ question.author.username }}</h4>
                        <p class="text-muted" style="margin: 0;">
                            提问于 {{ question.created_at|date:"Y-m-d H:i" }} ({{ question.created_at|timesince }}前)
                        </p>
                    </div>
                </div>
                
                <!-- 问题内容 -->
                <div class="question-content" style="font-size: 16px; line-height: 1.8;">
                    {{ question.content|safe }}
                </div>

                
                <!-- 问题统计 -->
                <div class="text-right" style="margin-top: 20px; padding-top: 15px; border-top: 1px solid #e9ecef;">
                    <span class="text-muted">
                        <i class="glyphicon glyphicon-comment"></i> {{ question.answer_set.count }} 个回答
                    </span>
                </div>
            </div>
        </div>

        <!-- 回答列表 -->
        <div class="page-header">
            <h2>回答 ({{ question.answer_set.count }})</h2>
        </div>

        {% if question.answer_set.count > 0 %}
        <div class="answers-container">
            {% for answer in question.answer_set.all %}
            <div class="panel panel-info answer-item">
                <div class="panel-heading">
                    <div class="media">
                        {% if answer.author.head %}
                        <img src="{{ answer.author.head.url }}" class="avatar" alt="用户头像">
                        {% else %}
                        {% load static %}
                        <img src="{% static 'img/default_avatar.png' %}" class="avatar" alt="默认头像">
                        {% endif %}
                        <div class="media-body">
                            <h5 class="media-heading" style="margin: 0;">
                                <strong>{{ answer.author.username }}</strong>
                            </h5>
                            <p class="text-muted" style="margin: 0; font-size: 14px;">
                                回答于 {{ answer.created_at|date:"Y-m-d H:i" }} ({{ answer.created_at|timesince }}前)
                            </p>
                        </div>
                    </div>
                </div>
                <div class="panel-body" style="font-size: 15px; line-height: 1.7;">
                    {{ answer.content|safe }}
                </div>
            </div>
            {% endfor %}
        </div>
        {% else %}
        <div class="alert alert-warning">
            暂无回答，快来成为第一个回答的人吧！
        </div>
        {% endif %}

        <!-- 添加回答表单 -->
        {% if user.is_authenticated %}
        <div class="page-header">
            <h3>添加你的回答</h3>
        </div>

        <div class="panel panel-default">
            <div class="panel-body">
                <form method="post" class="form-horizontal">
                    {% csrf_token %}
                    <div class="form-group">
                        <div class="col-sm-12">
                            {{ form.content.errors }}
                            {{ form.content|add_attrs:"form-control;rows:6;placeholder:请输入你的回答...;style:font-size:15px;line-height:1.6" }}
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-12 text-right">
                            <button type="submit" class="btn btn-success btn-lg">
                                <i class="glyphicon glyphicon-paper-plane"></i> 提交回答
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        {% else %}
        <div class="alert alert-info">
            <a href="{% url 'user:login' %}" class="btn btn-primary btn-sm">登录</a> 后可以回答问题
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}


